<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>易买网 - 购物车</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="scripts/function.js"></script>
    <script type="text/javascript" src="scripts/jquery-1.8.3.js"></script>
    <style>
        #shade{
            position:fixed;
            top:0;
            left:0;
            z-index:2;
            width:100%;
            height:100%;
            background-color:#000;
            opacity:0.6;
            /*兼容IE8及以下版本浏览器*/
            filter: alpha(opacity=60);
            display:none;
        }

        #modal {
            position: fixed;
            z-index:3;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width:304px;
            height:354px;
            margin: auto;
            display:none;
            background-color: #dc6b04;
        }
    </style>
    <script>
        window.onload=function(){
            var a1=document.getElementById('sub');
            var a2=document.getElementById('a2');
            a1.onclick=shield;
            a2.onclick=cancel_shield;
            zonge();
            function shield(e){

                var st= $(".danpinge");
                var sum=0;
                for(var i=0;i<st.length;i++){
                    sum+=parseInt($(st[i]).text());
                }
                $("#totalprice").text("总金额 : "+sum);
                e.preventDefault();
                getQrcode(sum);
                var shade = document.getElementById("shade");
                shade.style.display = "block";

                var modal = document.getElementById("modal");
                modal.style.display = "block";
            }

            function cancel_shield(e){
                e.preventDefault();
                var shade = document.getElementById("shade");
                shade.style.display = "none";

                var modal = document.getElementById("modal");
                modal.style.display = "none";
            }
        };
    </script>
</head>
<body>
<div id="header" class="wrap">
    <div id="logo"><img src="images/logo.gif"/></div>
    <div class="help"><span>${Curr_User.username}的购物车</span></div>
    <div class="navbar">
        <ul class="clearfix">
            <li><a href="index.jsp">首页</a></li>
            <li><a href="#">图书</a></li>
            <li><a href="#">百货</a></li>
            <li><a href="#">品牌</a></li>
            <li><a href="#">促销</a></li>
        </ul>
    </div>
</div>
<div id="childNav">
    <div class="wrap">
        <ul class="clearfix">
            <li class="first"><a href="#">音乐</a></li>
            <li><a href="#">影视</a></li>
            <li><a href="#">少儿</a></li>
            <li><a href="#">动漫</a></li>
            <li><a href="#">小说</a></li>
            <li><a href="#">外语</a></li>
            <li><a href="#">数码相机</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">秋冬靴</a></li>
            <li><a href="#">运动鞋</a></li>
            <li><a href="#">美容护肤</a></li>
            <li><a href="#">家纺用品</a></li>
            <li><a href="#">婴幼奶粉</a></li>
            <li><a href="#">饰品</a></li>
            <li class="last"><a href="#">Investor Relations</a></li>
        </ul>
    </div>
</div>
<div id="position" class="wrap">
    您现在的位置：<a href="index.jsp">易买网</a> &gt; 购物车
</div>
<div class="wrap">
    <div id="shopping">
        <form action="shopping-result.html">
            <table>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
                <c:if test="${orderDetailList!=null}">
                    <c:forEach items="${orderDetailList}" var="orderDetail" varStatus="o">
                        <tr id="product_id_${o.count}">
                            <td class="thumb"><input type="checkbox" class="ckb" id="id_${o.count}" name="eodid"
                                                     value="${orderDetail.eodid}"><img width="102px" height="102px" src="images/product/${orderDetail.product.eppicturename}"/><a
                                    href="GetProductById?epid=${orderDetail.product.epid}">${orderDetail.product.epname}</a></td>
                            <td class="price" id="price_id_${o.count}">
                                <span class="danpinge">${orderDetail.product.price * orderDetail.quantity}</span>
                                <input type="hidden" value="${orderDetail.product.price}"/>
                            </td>
                            <td class="number">
                                <dl>
                                    <dt><input id="quantity_id_${o.count}" type="text" name="quantity"
                                               value="${orderDetail.quantity}"/></dt>
                                    <dd onclick="reloadPrice(${o.count},${orderDetail.eodid})" >修改</dd>
                                </dl>
                            </td>
                            <td class="delete"><a href="javascript:void[0]"
                                                  onclick="deleteJudge(${orderDetail.eodid},'product_id_'+${o.count})">删除</a>
                            </td>
                        </tr>
                    </c:forEach>
                </c:if>
            </table>
            <div class="button">
                <div  style="float: left; text-align: left">
                    <input id="all" type="checkbox" name="all"/>&nbsp;全选
                    <input type="button" onclick="deleteBatchJudge()" value="批量删除"/>
                    <span id="total_price" style="color: #cc0000 ;font-size: 1.5em"></span>
                </div>
                <input id="sub" type="submit" value=""/>
            </div>
        </form>
    </div>
</div>
<div id="footer">
    Copyright &copy; 2018 云和数据 All Rights Reserved. 京ICP证1000001号
</div>
<div id="shade"></div>
<div id="modal">
    <div style="margin: 2px auto;width: 300px;height: 350px;background-color: #FFFFFF">
        <div style="text-align: right">
            <input id="a2" type="button" style="border: 0px;background-color: #cc2848 ;line-height: 100%;height: 15px;width: 15px;margin:5px 10px 10px 10px;" value="×">
        </div>
        <div style="height: 10px ;width: 100%"></div>
        <div style="text-align: center">
            <iframe style="width: 220px ;height: 220px; border: none;position: center" name="qrcode" scrolling="no">
            </iframe>
        </div>
        <div id="totalprice" style="text-align: center;font-size:1.5em;color: #dc6b04"></div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    $("input[name='all']").click(function () {
        if ($(this).is(":checked")) {
            $("input[name='eodid']").prop("checked", true);
        } else {
            $("input[name='eodid']").prop("checked", false);
        }
    })

    function deleteJudge(eodid,id) {
        var flag = confirm("确认删除");
        if (flag) {
            delShoppingAjax(eodid);
            delShopping(id);
        }
    }

    function delShoppingAjax(eodid) {
        $.ajax({
            type: "POST",
            url: "DelOrderDetailServlet",
            dataType: "JSON",
            data: {
                eodid: eodid
            },
            success: function (data) {
                zonge();
            }
        })
    }

    function deleteBatchJudge() {
        var flag = confirm("确认批量删除");
        if (flag) {
            var endids=new Array();
            $('input[name="eodid"]:checked').each(function(){
                var id="product_" + $(this).attr('id');
                endids.push($(this).val());
                delShopping(id);
            });
            var endidsstr=endids.join(',');
            delBatchShoppingAjax(endidsstr);
        }
    }

    function delBatchShoppingAjax(endidsstr){
         $.ajax({
             type:"POST",
             url:"DelOrderDetailServlet",
             dataType:"JSON",
             data:{
                 endidsstr:endidsstr,
                 flag:1
             },
             success:function (data) {
                 zonge();
             }
         })
     }
    function reloadPrice(count,eodid)
    {
        var price = document.getElementById("price_id_" + count).getElementsByTagName("input")[0].value;
        var priceBox = document.getElementById("price_id_" + count).getElementsByTagName("span")[0];
        var quantity = document.getElementById("quantity_id_" + count);
        if(quantity.value < 1){
            quantity.value=1;
        }
        $.ajax({
            type:"POST",
            url:"UpdOrderServlet",
            dataType:"JSON",
            data:{
                quantity:quantity.value,
                eodid:eodid
            },
            success:function (data) {

                priceBox.innerHTML = price * quantity.value;

                zonge();
            }
        })
    }
    function zonge() {
       var st= $(".danpinge");
        var sum=0;
        for(var i=0;i<st.length;i++){
            console.log(st[i]);
            sum+=parseInt($(st[i]).text());
        }
        document.getElementById("total_price").innerText="总金额: "+sum;
    }
    function getQrcode(sum) {
        $.ajax({
            type:"POST",
            url:"GetQrcode",
            dataType:"",
            data:{
                sum:sum
            },
            success:function (data) {
                if (data==0){
                    alert("您未选择商品");
                }else{
                    $("iframe[name='qrcode']").attr("src",data);
                }
            }
        })
    }
</script>
